<template>
  <div class="h-full">
    <div class="flex h-full">
      <a-card class="mr-2 py-2 h-full" :body-style="{ height: '100%', padding: '0 8px', display: 'flex', flexDirection: 'column' }">
        <SearchComb class="w-60" placeholder="姓名/助记码/手机号/信息卡号/病历卡号" @search="queryTabs" />
        <div class="flex-1 flex-col overflow-y-auto" @scroll.passive="getScroll($event)">
          <BaseList :data-source="listDataSource" :loading="loading" class="w-60">
            <template #renderItem="{ item }">
              <div class="py-2 px-3" :class="store.currentPatient.jzbh === item.jzbh ? 'active' : ''" @click="onSelect(item)">
                <div class="flex justify-between">
                  <div class="flex items-center">
                    <div class="w-24 text-base font-bold text-primary truncate" :title="item.brName">
                      {{ item.brName }}
                    </div>

                    <a-button v-if="item.czfz === '初诊'" type="primary" shape="circle" size="small">初</a-button>
                    <a-button v-if="item.czfz === '复诊'" type="primary" shape="circle" size="small" class="bg-orange-400">复</a-button>
                  </div>
                  <p class="mb-0">{{ item.lsh }}</p>
                </div>
                <div class="flex justify-between pt-2">
                  <span class="mx-1 ml-2">{{ item.brXb }}</span>
                  <p class="ml-2 mr-2 mb-0 w-8">{{ item.brAge }}</p>
                  <LabelValue class="text-left ml-2" :width="140" :value="item.matterName" />
                </div>
              </div>
            </template>
          </BaseList>
        </div>
      </a-card>
      <div class="h-full flex flex-col flex-1 overflow-hidden">
        <PatientInfoHeader :patient-info="store.currentPatient">
          <a-divider type="vertical" :style="{ height: '40px', margin: '0 16px' }" />
          <div>
            <div class="flex items-center">
              <LabelValue class="ml-4" label="客户来源" :width="280" :value="store.currentPatient.pathName" />
              <LabelValue label="业务员" :width="280" :value="store.currentPatient.brYwyName" />
              <LabelValue label="科室" :width="200" :value="store.currentPatient.ksmc" />
            </div>
            <div class="flex items-center">
              <LabelValue class="ml-4" label="信息卡号" :width="280" :value="store.currentPatient.brId" />
              <LabelValue class="" label="登记时间" :width="280" :value="store.currentPatient.ghsj" />
              <LabelValue class="" label="医生" :width="200" :value="store.currentPatient.empName" />
            </div>
          </div>
        </PatientInfoHeader>
        <div class="flex flex-1 h-full mt-2">
          <div class="flex-1 h-full overflow-hidden">
            <a-tabs v-model:active-key="activeKey" class="h-full">
              <a-tab-pane key="1" tab="配镜开单" class="h-full">
                <TabOptician />
              </a-tab-pane>
              <a-tab-pane v-if="systemConfig.dispose" key="2" tab="视光医嘱" force-render>
                <TabDispose />
              </a-tab-pane>
              <template #rightExtra>
                <div class="flex items-center">显示退费数据<a-switch v-model:checked="refundSwitch" class="ml-2" @change="onChangeReturnSwitch" /></div>
              </template>
            </a-tabs>
          </div>
          <!-- 历史 -->
          <a-card class="w-80 ml-2 history-card" :class="historyExpand ? 'history-expand' : ''" :body-style="{ paddingTop: 0, height: '100%' }">
            <div class="history-expand-btn" @click="() => (historyExpand = !historyExpand)">
              <DoubleLeftOutlined v-if="historyExpand" />
              <DoubleRightOutlined v-else />
            </div>
            <div v-if="historyExpand" class="pt-12 text-primary font-semibold">历史</div>
            <div v-else>
              <div class="mt-4 text-primary font-semibold text-center">历史</div>
              <div class="mt-3">
                <a-collapse v-model:active-key="CollapseActiveKey">
                  <a-collapse-panel v-for="(item, index) in historyData" :key="index">
                    <template #header>
                      <div class="flex justify-between">
                        <div>{{ item.ghsj }}</div>
                        <div>{{ item.matterName }}</div>
                      </div>
                    </template>
                    <a-radio-group v-model:value="tabActiveKey" button-style="solid" class="w-full !rounded-none">
                      <a-radio-button value="1" class="w-1/2 text-center !rounded-none border-t-0 !border-l-0">最终处方</a-radio-button>
                      <a-radio-button value="2" class="w-1/2 text-center !rounded-none border-t-0 border-r-0">销售单</a-radio-button>
                    </a-radio-group>
                    <FinialCheckInfo v-if="tabActiveKey === '1'" :resource-data="item.ooFinalCheckResponse" />
                    <OpticianInfo v-if="tabActiveKey === '2'" :resource-data="item.salesOrderHistoryXSDResponses" />
                  </a-collapse-panel>
                </a-collapse>
              </div>
            </div>
          </a-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue'
import SearchComb from '@/components/SearchComb'
import PatientInfoHeader from '@/components/business/PatientInfoHeader'
import { post } from '@/utils/request'
import BaseList from '@/components/BaseList'
import appStore from '@/store/app'
import { getSystemConfig } from '@/utils/systemConfig'
import TabOptician from './TabOptician'
import TabDispose from './TabDispose'
import userStore from './store'
import FinialCheckInfo from './components/HistoryTab/FinialCheckInfo.vue'
import OpticianInfo from './components/HistoryTab/OpticianInfo.vue'

// 镜架 60  设备 64  其他商品 65   镜片 61  隐形眼镜 62  角塑 63
const store = userStore()
const activeKey = ref('1')
const pageNum = ref(1)

const loading = ref(false)
const searchForm = ref({})
const listDataSource = ref([])
const historyExpand = ref(true)
const isLoadMore = ref(false)
const CollapseActiveKey = ref([])
const tabActiveKey = ref('1')
const { ORG_CODE } = appStore()
const historyData = ref([])
const refundSwitch = ref(false)
const systemConfig = ref({})
const onSelect = (item) => {
  store.currentPatient = item
}
// 左侧数据
const queryTabs = async (params, loadMore = false) => {
  searchForm.value = params
  loading.value = true
  pageNum.value = loadMore ? pageNum.value + 1 : 1
  isLoadMore.value = loadMore
  const { code, data, msg, total } = await post('/outp/mzys/getOoOpticianInfoList', {
    pageSize: 20,
    pageNum: pageNum.value,
    pyjm: searchForm.value?.searchKey,
    eddate: searchForm.value?.endDate,
    stdate: searchForm.value?.startDate,
    ghys: searchForm.value?.ghys,
    ghzts: [0, 1, 3, 4],
    type: 1
  })
  loading.value = false
  if (code !== 0) return message.error(msg || '查询失败')

  listDataSource.value = loadMore ? [...listDataSource.value, ...data] : data
  const isAllData = listDataSource.value.length === total
  isLoadMore.value = isAllData

  if (!data.length) {
    store.currentPatient = {}
    return
  }
  if (!loadMore) {
    store.currentPatient = listDataSource.value[0]
  }
}

const getHistoryTab = async () => {
  const { data } = await post('/optometry/ooadolescentcheck/getSalesOrderHistory', {
    brId: store.currentPatient.brId,
    ooLsh: store.currentPatient.jzbh,
    orgCode: ORG_CODE
  })
  if (data.code !== 0) return message.error(data.msg || '查询失败')
  historyData.value = data?.data || []
}
const onChangeReturnSwitch = (e) => {
  store.refundSwitch = e
}
watch(
  () => store.currentPatient.brId,
  () => {
    getHistoryTab()
  },
  {
    deep: true
  }
)
onBeforeUnmount(() => {
  store.currentPatient = {}
})
const getScroll = (event) => {
  // 滚动条距离底部的距离scrollBottom
  const scrollBottom = event.target.scrollHeight - event.target.scrollTop - event.target.clientHeight
  if (scrollBottom < 200) {
    !isLoadMore.value && queryTabs(searchForm.value, true)
  }
}
onMounted(() => {
  systemConfig.value.dispose = getSystemConfig('IS_OO_OPTICAN_SHOW_DISPOSE_CHANNEL') === '1' //是否显示配镜开单处置频道
})
</script>

<style lang="less" scoped>
:deep(.ant-tabs > .ant-tabs-nav) {
  margin-bottom: 0px !important;
  padding: 0px 8px;
  background: #ffffff;
}
:deep(.ant-tabs .ant-tabs-content) {
  height: 100%;
}
.history-card {
  transition: all 0.3s;
}
.history-expand {
  width: 56px !important;
  :deep(.ant-tabs) {
    visibility: hidden;
  }
}
.history-expand-btn {
  position: absolute;
  top: 4px;
  right: 12px;
  z-index: 99;
  padding: 8px;
  color: var(--primary-color);
  background-color: var(--secondary-color);
  border-radius: 8px;
  cursor: pointer;
}
:deep(.ant-collapse .ant-collapse-content > .ant-collapse-content-box) {
  padding: 0px 0px 0px !important;
}
</style>
